<template>
  <div class="main-content">
    <div class="main-top-content" ref="mainTopContent">
      <searchComponent :search-content="searchFields" :search-data="searchData" @success="setNowField">
        <template v-slot:default="scope">
          <div  class="search-content">
            <div class="search-item" v-if="nowSearchField.indexOf('positionName') > -1">
              <el-input
                  size="small"
                  v-model="queryParams.positionName"
                  class="input-width clear-input"
                  suffix-icon="el-icon-search"
                  clearable
                  placeholder="请输入岗位名称"
              ></el-input>
            </div>
            <div class="search-item" v-if="nowSearchField.indexOf('roleCode') > -1">
              <el-input
                  size="small"
                  v-model="queryParams.roleCode"
                  class="input-width clear-input"
                  suffix-icon="el-icon-search"
                  clearable
                  placeholder="请输入角色编码"
              ></el-input>
            </div>
            <div class="search-item" v-if="nowSearchField.indexOf('positionCode') > -1">
              <el-input
                  size="small"
                  v-model="queryParams.positionCode"
                  class="input-width clear-input"
                  suffix-icon="el-icon-search"
                  clearable
                  placeholder="请输入岗位编码"
              ></el-input>
            </div>
          </div>

          <div class="search-button">
            <el-button type="primary" size="small"  @click="queryPositionList">搜索</el-button>
          </div>
        </template>
      </searchComponent>
    </div>

    <div class="main-operate-content" ref="mainOperateContent">
      <div style="margin-right:20px">
        <table-operate-component :fields="fields" :field-data="showFieldData" @success="setShowField">
          <template v-slot:operate>
            <div style="float: right;">
              <el-button type="primary" size="small"  @click="addPosition">添加</el-button>
            </div>
          </template>
        </table-operate-component>
      </div>
    </div>
    <div class="main-contain-content" ref="tableContainer">
      <el-table
          ref="table"
          :height="tableHeight"
          :data="tableData"
          size="small"
          :header-cell-style="{background:'#E8F0F3',border: '1px solid #d9d9d9'}"
          border
          :row-style="{height:'0'}"
          v-loading="loading">
        <el-table-column
            v-for="(item,index) in fields"
            v-if="item.show"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :min-width="item.width"
            :fixed="item.fixed">

          <template v-if="item.prop == 'operation'" scope="scope">
            <el-button @click="editPosition(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="10"
          layout="sizes,total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <!-- 编辑岗位 -->
    <editPosition ref="editPosition" @success="queryPositionList('init')"/>
    <!-- 添加岗位 -->
    <addPosition ref="addPosition" @success="queryPositionList('init')"/>
  </div>
</template>

<script>
import searchComponent from '@v/common/SearchComponents.vue'
import tableOperateComponent from '@v/common/TableOperateComponent.vue'
import editPosition from "@v/position/components/EditPosition.vue";
import addPosition from "@v/position/components/AddPosition.vue";
import {queryList} from '@/api/position';


export default {
  components:{
    addPosition, editPosition,
    searchComponent,
    tableOperateComponent
  },
  data() {
    return {
      //筛选条件个人数据配置
      searchData:{
        dataType:'searchField',
        dataCode:'position'
      },
      nowSearchField:[],
      searchFields:[
        {
          field:"positionCode",
          label:"岗位编码",
          fieldCheck:true,
        },
        {
          field:"roleCode",
          label:"角色编码",
          fieldCheck:true,
        },
        {
          field:"positionName",
          label:"岗位名称",
          fieldCheck:true,
        }
      ],

      //显示字段个人数据配置
      nowShowField:[],
      showFieldData:{
        dataType:'showField',
        dataCode:'position'
      },
      tableHeight:400,
      total: 0,
      loading: false,
      nowPage:1,
      queryParams:{
        pageNum:1,
        pageSize:10,
        roleCode:"",
        positionCode:"",
        positionName:""
      },
      fields:[
        {
          label:"角色编码",
          prop:"roleCode",
          width:150,
          show:true
        },{
          label:"岗位编码",
          prop:"positionCode",
          width:150,
          show:true
        },{
          label:"岗位名称",
          prop:"positionName",
          width:120,
          show:true
        },{
          label:"岗位昵称",
          prop:"positionNickName",
          width:150,
          show:true
        },{
          label:"岗位等级",
          prop:"positionLevel",
          width:200,
          show:true
        },{
          label:"备注",
          prop:"remark",
          width:200,
          show:true
        },{
          label:"操作",
          prop:"operation",
          width:100,
          fixed:'right',
          show:true
        }
      ],
      tableData: []
    }
  },
  created() {
    this.queryPositionList();
  },
  mounted() {
    this.updateTableHeight();
    window.addEventListener('resize', this.updateTableHeight);
    this.divUpdateTableHeight();
  },
  methods: {
    setShowField(fields){
      this.fields = fields;
      this.$nextTick(() => {
        this.$refs.table.doLayout(); // 解决表格错位
      });
    },
    setNowField(field){
      this.nowSearchField = field;
    },
    divUpdateTableHeight() {
      const el = this.$refs.mainTopContent;
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          this.updateTableHeight();
        }
      });
      resizeObserver.observe(el);
    },
    updateTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = this.calculateTableHeight(); // 确保表格已经渲染完成后再计算高度
      });
    },
    calculateTableHeight() {
      // 实现高度计算逻辑，例如使用父容器的高度减去某些边距等
      let operate = this.$refs.mainOperateContent.clientHeight;
      let top = this.$refs.mainTopContent.clientHeight;
      let all = window.innerHeight;
      return all - 120 - operate - top - 60;
    },
    handleClick(row) {
      console.log(row);
    },
    async queryPositionList(){
      this.loading = true;
      let ret = await queryList(this.queryParams);
      let content = ret.data;
      this.total = content.total;
      this.tableData = content.list;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.querySysUserList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.querySysUserList();
    },
    //添加用户
    addPosition(){
      this.$refs["addPosition"].showDialog();
    },
    //编辑用户
    editPosition(user){
      this.$refs["editPosition"].showDialog(user);
    },
  },

}

</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>

</style>
